<template>
  <view class="index">
    <view class="basic-flex-center index-nav" :style="navBarStyle">
      <image class="icon" src="/static/base/icon_2ss.png" @click="goBack()"></image>
      <image class="logo" src="/static/base/icon_2logo.png"></image>
    </view>

    <swiper class="index-banner" circular :indicator-dots="true" :autoplay="true" :interval="5000"
            :duration="2000" indicator-color="rgba(255, 255, 255, 0.5)" indicator-active-color="#FFFFFF">
      <swiper-item v-for="(item ,index) in banners" :key="index">
        <image
            class="img"
            :src="$utils.formatAttachmentUrl(item.image_url)"
        ></image>
      </swiper-item>
    </swiper>

    <scroll-view :scroll-x="true" class="index-scroll">
      <view class="basic-flex-sb tabs">
        <view class="basic-flex-column basic-flex-center item" v-for="(item,index) in tabs" :key="index"
              @click="selectTab(index)"
              :class="{'this-tab':isTab===index}">
          <view class="title">{{ item.name }}</view>
          <view class="icon"></view>
        </view>
      </view>
    </scroll-view>

    <view class="index-goods">
      <view class="column">
        <product-item v-for="(item, index) in dataList.filter((val,valIndex)=>valIndex % 2 === 0)" :key="index"
                      :product-data="item"></product-item>
      </view>
      <view class="column">
        <product-item v-for="(item, index) in dataList.filter((val,valIndex)=>valIndex % 2 !== 0)" :key="index"
                      :product-data="item"></product-item>
      </view>
    </view>

  </view>
</template>

<script>

import navigationBar from "../../configure/mixins/navigationBar";
import {getBanner, getCate, getHomeWork} from "../../configure/api/index";
import page from "../../configure/mixins/page";

export default {
  mixins: [navigationBar, page],
  data() {
    return {
      banners: [],
      tabs: [],
      isTab: 0,
      keyword: '',
    }
  },
  created() {
    this.queryBanner()
    this.queryTabs()
  },
  methods: {
    queryBanner() {
      getBanner().then(res => {
        this.banners = res.data
      })
    },
    queryTabs() {
      getCate().then(res => {
        this.tabs = res.data
        this.queryInitialization()
      })
    },
    selectTab(index) {
      this.isTab = index
      this.queryInitialization()
    },
    queryInitialization() {
      this.pageNum = 1; // 初始化为第一页
      this.queryByPage()
    },
    queryByPage() {
      getHomeWork({
        cate_id: this.tabs[this.isTab].id,
        keywords: this.keyword,
        page: this.pageNum,
        page_size: this.pageSize,
      }).then(res => {
        this.handlePaginationResponse(res);
      })
    },
    bottomUpMethod() {
      if (this.pageNum < this.allPageNum) {
        this.pageNum++; // 页码加1
        this.loadStatus = 'refresh'; // 显示加载中的状态
        this.queryByPage(); // 加载下一页的数据
      }
    },
  },
}
</script>
<style>
page {
  background: #F7F8FA;
}
</style>
<style lang="scss" scoped>
.index {
  & > .index-nav {
    position: sticky;
    top: 0;
    z-index: 999;
    background: #FFFFFF;

    & > .icon {
      position: absolute;
      left: 15px;
      width: 18px;
      height: 18px;
    }

    & > .logo {
      width: 95px;
      height: 38px;
    }
  }

  & > .index-banner {
    margin: 7px 5px;
    height: 277px;
    overflow: hidden;

    & .img {
      width: 100%;
      height: 277px;
      background: #FFFFFF;
    }
  }

  & > .index-scroll {
    width: 100%;
    flex-wrap: nowrap;
    white-space: nowrap;
    border-bottom: 1px solid rgba(112, 112, 112, 0.05);

    & .tabs {

      & > .item {
        padding: 3px 20px 15px;
        transition: all 0.3s ease; // 增加过渡效果，平滑过渡
        gap: 3px;

        & > .title {
          font-weight: 500;
          font-size: 16px;
          color: #7C7C7C;
        }

        & > .icon {
          width: 0px;
          height: 3px;
          background: #F5CA21;
          border-radius: 3px;
          transition: width 0.3s ease; // 增加宽度变化的过渡
        }
      }

      & > .this-tab {
        & > .title {
          color: #000000;
          font-weight: bold;
        }

        & > .icon {
          width: 30px;
        }
      }
    }
  }

  & > .index-goods {
    padding: 5px;
    display: flex;
    gap: 5px;

    & > .column {
      display: flex;
      flex-direction: column;
      gap: 5px;
      flex: 1;
    }
  }

}
</style>
